<template>
    <div class="w300 h100p bgc-f fysxc ovy-s por">
        <div mox-after="h50">
            <div class="w275 h60 th60 t16">{{title}}</div>

            <div v-for="item,index in getgoods" :key="item.id" class="h108 fxsys mb35">
                <div class="w100 h100p ovh br5 fxcyc">
                    <img class="h100p" v-lazy="item.img" alt />
                </div>
                <div class="w175 h100p fy1xs pl10 bsb">
                    <div class="tc-35">{{item.title}}</div>
                    <div class="t12">{{item.des}}</div>
                    <div class="fx1yc">
                        <span class="t18-b tc-35 mr20">￥ {{item.price}}</span>
                        <van-stepper
                            :default-value="item.count || 0"
                            disable-input
                            min="0"
                            @change="v=>count(item,index,v)"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Stepper } from "vant";

export default {
    components: {
        VanStepper: Stepper,
    },
    props: {
        // content: { type: Array, default: [] },
        title: { type: String, default: "" },
        contkey: { type: String, default: "a" },
    },
    data() {
        return {
            goodsRender: [],
        };
    },
    computed: {
        getgoods() {
            return this.$store.getters.getGoods[this.contkey];
        },
    },
    methods: {
        count(item, index, v) {
            item.count = v;
            this.$store.commit("updataGoodsItem", {
                key: this.contkey,
                index: index,
                value: item,
            });
        },
    },
};
</script>

<style>
.afterbox::after {
    content: "";
    display: block;
    height: 50px !important;
    width: 100%;
}
</style>
